<template>
	<view class="mian_com" v-if="detailData">
		<view v-if="detailData.iamge" class="img_goods">
			<image class="img" lazy-load :src="detailData.iamge"></image>
		</view>
		<view v-else class="void_goods">
			<image class="img" src="/static/goods.svg"></image>
			<view class="tip">暂无图片</view>
		</view>
		<view class="goods_main">
			<view class="brand">
				<p class="tip">{{detailData.goodsBrand}}</p><span class="don">·</span>
				<p class="tip">{{detailData.goodsType}}</p>
			</view>
			<view class="goods_name">
				{{detailData.goodsName}}
			</view>
			<view class="goods_ms"><span class="mo">型号：{{detailData.goodsModel}}</span>
				<span>规格：{{detailData.goodsSpecName}}</span>
			</view>
			<view class="code_num">
				<span class="c9">防伪编码：</span>{{detailData.code}}
				<image @click="copy(detailData.code)" class="img" src="@/static/copy.svg" mode=""></image>
			</view>
		</view>
		<view class="card">
			<view class="hel">
				<view class="others">
					<uni-icons class="icon_pi" color="#fff" type="calendar-filled"></uni-icons><span>帮他人登记</span>
				</view>
				<switch style="transform:scale(0.6);width: 80rpx;" :checked="codeRegisterVo.helpOtherRegister"
					@click="changeShow" color="#007cff" />
			</view>
		</view>
		<view class="card" v-if="!codeRegisterVo.helpOtherRegister">
			<view class="hel" @click="seleAddress">
				<view class="others">
					<uni-icons class="icon_pi" color="#fff" type="location-filled"></uni-icons>
					<span v-if="!codeRegisterVo.province&&!codeRegisterVo.helpOtherRegister">请选择登记地址</span>
					<view v-else>
						<view class="tipadd">
							<span class="user_name">{{codeRegisterVo.name}}</span>&nbsp;&nbsp;{{codeRegisterVo.phone}}
						</view>
						<view class="address_tip">
							{{codeRegisterVo?.address}}
						</view>
						<view class="tipadd">
							{{codeRegisterVo.province}}/{{codeRegisterVo.city}}/{{codeRegisterVo.area}}
						</view>
					</view>
				</view>
				<uni-icons type="forward" color="#aaa"></uni-icons>
			</view>
		</view>
		<view v-if="codeRegisterVo.helpOtherRegister">
			<uni-forms ref="baseForm" :modelValue="codeRegisterVo" label-width="80">
				<view class="uni_form">
					<uni-forms-item label="联系姓名">
						<uni-easyinput placeholderStyle="font-size:28rpx;" v-model="codeRegisterVo.name"
							placeholder="请输入登记人姓名" />
					</uni-forms-item>
					<uni-forms-item label="联系手机">
						<uni-easyinput placeholderStyle="font-size:28rpx;" type="number" maxlength="11"
							v-model="codeRegisterVo.phone" placeholder="请输入登记人手机号" />
					</uni-forms-item>
					<uni-forms-item label="所在地区">
						<AreaAddress ref="addressRef"></AreaAddress>
					</uni-forms-item>
					<uni-forms-item label="详细地址">
						<uni-easyinput placeholderStyle="font-size:28rpx;" v-model="codeRegisterVo.address"
							placeholder="请输入详细地址" />
					</uni-forms-item>
				</view>
			</uni-forms>
		</view>
		<view class="btn_logout">
			<button type="primary" :disabled="true" size="small" class="onlogout" v-if="detailData.register">
				<span>已登记</span>
			</button>
			<button type="primary" size="small" class="onlogout" @click="activeConfirmation" v-else>
				<span v-if="isOrder">激活并报单</span>
				<span v-else>激活并登记</span>
			</button>
		</view>
		<!--选择服务地址  str -->
		<uni-popup ref="popupRef" type="bottom" background-color="#f6f7fa">
			<view class="popup_main">
				<view class="lable_top">
					选择服务地址
					<uni-icons class="icon" color="#aaa" @click="popupRef.close()" size="22"
						type="closeempty"></uni-icons>
				</view>
				<radio-group class=" sele_ul">
					<view class="sele_li" v-for="(item,index) in store.state.addressList" :key="index">
						<view class="sele_li_item" @click="itemUser(item)">
							<radio :value="item.id" @click="itemUser(item)" style="transform: scale(.8);"
								:checked="chackUseritem?.id==item.id" />
							<view class="add_ed">
								<view class="user_xx">
									<span class="user_name">{{item.username}}</span>&nbsp; &nbsp;{{item.phone}}
									<view class="tip" v-if="item.mainContact">
										默认
									</view>
								</view>
								<view class="text">
									{{item.address}}
								</view>
								<view>
									{{item.province}}/{{item.city}}/{{item.area}}
								</view>
							</view>
						</view>
						<uni-icons size="21" color="#666" type="compose" @click.stop="editItem(item)"></uni-icons>
					</view>
				</radio-group>
				<view class="add_btn">
					<button class="btn" @click="onaddAddress">
						添加地址
					</button>
				</view>
			</view>
		</uni-popup>
		<!-- end -->
		<!-- 确定登记激活弹窗 -->
		<uni-popup ref="activeDialog" type="dialog">
			<uni-popup-dialog cancelText="取消" confirmText="确认激活" title="提示" @confirm="dialogConfirm"
				@close="dialogClose">
				<view>
					<view class="back_tip">
						请确认您的登记信息填写是否无误！
					</view>
					<view class="red_tip">
						激活后，您将无法修改登记的所有信息！
					</view>
				</view>
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive } from "vue";
	import { onLoad,onUnload } from '@dcloudio/uni-app'
	import apiCode from '@/util/api/code.js'
	import store from '@/store/index.js'
	import AreaAddress from '@/components/u-user/AreaAddress.vue'
	import apiOrder from "@/util/api/order";
	// 通过onLoad接收数据
	onLoad((e) => {
		getDetail(e.id, e.isOrder)
		isCode.value = e.id
		isOrder.value = e.isOrder || false
	})
	onUnload(() => {
		uni.hideLoading()
	})
	const isOrder = ref(false)//标记是扫码报单的
	const isCode = ref('')//扫码商品编码
	const activeDialog = ref()
	const popupRef = ref()
	const detailData = ref(null)
	const chackUseritem = ref(null)//选择的用户地址Id
	let codeRegisterVo = reactive({
		"address": "",//登记详细地址
		"area": "",
		"city": "",
		"codeId": null,//编码ID
		"helpOtherRegister": false,//是否帮他人登记：false-否，true-是，登记没有账号并创建新账号
		"name": "",
		"phone": "",
		"province": "",
		"town": "",
		// "registerFieldVals": [
		// 	{
		// 		"codeFieldId": null,//编码自定义字段ID
		// 		"id": null,//字段值ID，新增不必传，修改必传	
		// 		"name": "",//字段名称
		// 		"type": null,//字段类型：1-文本，2-多行文本，3-单选，4-多选，5-多图，6-附件，7-视频，8-评分,示例值(1)
		// 		"value": ""//字段值
		// 	}
		// ]
	})
	const addressRef = ref() //地址组件元素
	// 获取地址列表
	const seleAddress = async () => {
		await store.dispatch('seleAddress', 0)
		popupRef.value.open()
	}
	// 选择地址
	const itemUser = (item) => {
		chackUseritem.value = item
		codeRegisterVo.address = item.address
		codeRegisterVo.province = item.province
		codeRegisterVo.city = item.city
		codeRegisterVo.area = item.area
		codeRegisterVo.town = item.town
		codeRegisterVo.phone = item.phone
		codeRegisterVo.name = item.username
		popupRef.value.close()
	}

	const changeShow = () => {
		// true 帮他人登记
		codeRegisterVo.helpOtherRegister = !codeRegisterVo.helpOtherRegister
		if (!codeRegisterVo.helpOtherRegister) {
			if (chackUseritem.value) {
				itemUser(chackUseritem.value)
			}

		}
		// codeRegisterVo.address = ''
		// codeRegisterVo.province = ''
		// codeRegisterVo.city = ''
		// codeRegisterVo.area = ''
		// codeRegisterVo.town = ''
		// codeRegisterVo.phone = ''
		// codeRegisterVo.name = ''
	}
	// 复制
	const copy = (val : any) => {
		uni.setClipboardData({
			data: val,
			success: function () {
				//调用方法成功
				uni.showToast({
					title: '已复制',
					icon: 'none'
				})
			},
		})
	}
	// 获取商品详情
	const getDetail = async (id, isOrder) => {
		uni.showLoading({
			mask: true,
			title: '加载中...'
		})
		if (isOrder) {
			await apiOrder.getUserOrderCodeInfo({ code: id }).then(res => {
				if (res.code == 20000) {
					detailData.value = res.data.row
					codeRegisterVo.codeId = res.data.row.id

				}
			})
		} else {
			await apiCode.getCodeDetail(id).then(res => {
				if (res.code == 20000) {
					detailData.value = res.data.row
					codeRegisterVo.codeId = res.data.row.id
				}
			})
		}
		uni.hideLoading()

	}

	// 添加地址
	const onaddAddress = () => {
		uni.navigateTo({
			url: '/pages/user/edaddress'
		})
	}
	// 编辑地址
	const editItem = (item) => {
		uni.navigateTo({
			url: '/pages/user/edaddress?item=' + JSON.stringify(item)
		})
	}
	// 登记激活
	const activeConfirmation = async () => {
		if (codeRegisterVo.helpOtherRegister) {
			codeRegisterVo = { ...codeRegisterVo, ...addressRef.value.address }
		}
		if (!codeRegisterVo.name) {
			uni.showToast({
				title: '请输入联系人姓名!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		if (!/^1[^1^2]\d{9}$/.test(codeRegisterVo.phone)) {
			uni.showToast({
				title: '请输入正确的手机号!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		if (!codeRegisterVo.area) {
			uni.showToast({
				title: '请选择地址!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		if (!codeRegisterVo.address) {
			uni.showToast({
				title: '请输入详细地址!',
				position: 'top',
				icon: "none"
			});
			return;
		}
		activeDialog.value.open()

	}
	// 确认激活
	const dialogConfirm = async () => {
		uni.showLoading({
			mask: true,
			title: "加载中..."
		})
		await apiCode.saveUserCodeRegister(codeRegisterVo).then(res => {
			if (res.code == 20000) {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				if (isOrder.value) {
					uni.navigateTo({
						url: '/pages/home/add?code=' + isCode.value
					})
				} else {
					uni.redirectTo({
						url: '/pages/goods/goods'
					})
				}
			}
		})
		uni.hideLoading()
	}
	// 关闭弹窗
	const dialogClose = () => {
		activeDialog.value.close()
	}
</script>

<style lang="scss" scoped>
	.mian_com {
		background-color: #f6f7fa;
		position: relative;

		.img_goods {
			box-shadow: 0 0 10rpx 4rpx #eee;
			height: 460rpx;
			width: 100%;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.void_goods {
			display: flex;
			align-items: center;
			flex-direction: column;
			justify-content: center;
			height: 460rpx;
			box-shadow: 0 0 20rpx 10rpx #eee;
			background-color: #fff;

			.img {
				width: 60%;
				height: 200rpx;
			}

			.tip {
				color: #aaa;
				font-size: 28rpx;
			}
		}

		.goods_main {
			margin: 24rpx 0;
			background-color: #fff;
			padding: 24rpx;

			.brand {
				color: #000;
				display: flex;
				align-items: center;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				width: 400rpx;
				margin-bottom: 18rpx;

				.tip {
					color: #007cff;
					font-size: 32rpx;
					font-weight: bold;
				}

				.don {
					font-weight: bold;
					padding: 0 8rpx;
				}
			}

			.goods_name {
				font-weight: bold;
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				margin-bottom: 14rpx;
			}

			.goods_ms {
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999;
				flex-wrap: wrap;
				margin-bottom: 14rpx;

				.mo {
					margin-right: 60rpx;
				}
			}

			.code_num {
				font-size: 24rpx;

				.c9 {
					color: #999;
				}

				.img {
					width: 24rpx;
					height: 24rpx;
					margin-left: 10rpx;
				}

			}
		}

		.card {
			margin: 16rpx 0;
			background-color: #fff;
			padding: 12rpx 24rpx;
			font-size: 24rpx;

			.hel {
				display: flex;
				align-items: center;
				justify-content: space-between;
				min-height: 50rpx;

				.others {
					display: flex;
					align-items: center;
					font-size: 28rpx;

					.address_tip {
						width: 80%;
						white-space: pre-wrap;
						font-size: 28rpx;
						color: #333;
						margin-bottom: 8rpx;
						font-weight: bold;
					}

					.tipadd {
						margin-bottom: 8rpx;
						color: #666;

						.user_name {
								font-size: 24rpx;
						}
					}

					.icon_pi {
						padding: 6rpx;
						background-color: #00c0c0;
						border-radius: 50%;
						margin-right: 24rpx;
						width: 40rpx;
						height: 40rpx;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}

		.uni_form {
			background-color: #fff;
			padding: 0 24rpx;

			:deep(.uni-forms-item) {
				margin-bottom: 8rpx;

				.item_zip {
					display: flex;
					align-items: center;
				}
			}

			:deep(.is-input-border) {
				border: none;
				font-size: 28rpx;

				&.is-focused {

					.uniui-clear,
					.uniui-eye-filled {
						color: #007cff99 !important;
					}
				}
			}
		}

		.btn_logout {
			position: fixed;
			bottom: 70rpx;
			margin: 0 auto;
			width: 100%;

			:deep(button:after) {
				border: none !important;
			}

			.onlogout {
				font-size: 28rpx;
				padding: 0rpx 200rpx;
				margin: 0 60rpx;
				height: 80rpx;
				border-radius: 50rpx;
				line-height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #007cff;
			}
		}

		.popup_main {
			background-color: #eee;
			height: 900rpx;
			border-radius: 40rpx 40rpx 0 0;
			width: 100%;
			position: relative;
			overflow-y: auto;

			.lable_top {
				text-align: center;
				line-height: 100rpx;
				background-color: #fff;
				border-radius: 40rpx 40rpx 0 0;
				height: 100rpx;

				.icon {
					position: absolute;
					right: 40rpx;
				}
			}

			.sele_ul {
				overflow: auto;
				height: 80%;
				width: 100%;

				.sele_li {
					background-color: #fff;
					margin: 40rpx;
					border-radius: 20rpx;
					padding: 24rpx;
					font-size: 24rpx;
					color: #666;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.sele_li_item {
						display: flex;
						align-items: center;

						.add_ed {
							display: flex;
							flex-direction: column;
							flex: 1;
							margin-left: 14rpx;

							.user_xx {
								font-size: 28rpx;
								display: flex;
								align-items: center;
								margin-bottom: 12rpx;

								.user_name {
									font-size: 24rpx;
								}

								.tip {
									border: 1rpx solid #00c0c0;
									margin-left: 30rpx;
									border-radius: 10rpx;
									padding: 2rpx 6rpx;
									color: #00c0c0;
									font-size: 22rpx
								}
							}

							.text {
								font-size: 28rpx;
								color: #000;
								font-weight: bold;
								width: 100%;
								white-space: pre-wrap;
								margin-bottom: 12rpx;
							}

						}
					}
				}
			}

			.add_btn {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.btn {
					background-color: #007cff;
					color: #fff;
					width: 60%;
					height: 80rpx;
					line-height: 80rpx;
					font-size: 30rpx;
					border-radius: 40rpx;
				}
			}
		}

		.back_tip {
			font-size: 28rpx;
			width: 100%;
			text-align: center;
			margin-bottom: 10rpx;
		}

		.red_tip {
			font-size: 28rpx;
			color: #dd524d;
			text-align: center;
		}
	}
</style>